import React, { useState, Fragment } from 'react';
import { Switch, Button } from 'antd';
import { Effect } from './components/effect';

const useEffectConponent = () => {
    const [mount, setMount] = useState(false);
    const [count, setCount] = useState(0);

    const onChange = v => {
        setMount(v);
    };
    return (
        <Fragment>
            <Button onClick={() => setCount(count + 1)}>addn count</Button>
            <p>count:{count}</p>
            <Switch
                checkedChildren={<div>挂载</div>}
                unCheckedChildren={<div>卸载</div>}
                onChange={onChange}
            >
                mount
            </Switch>
            {mount ? <p>true</p> : <p>false</p>}
            {mount && <Effect />}
        </Fragment>
    );
};

export default useEffectConponent;
